<template>
    <div class="page">
        <div class="tabPan">
            <div class="panHeader">
                <div class="title">
                    Tables
                </div>
                <div class="acs">
                    <ul class="lstAcs">
                        <li>
                            <el-button type = "text"><i class="fa fa-refresh"></i> 刷新</el-button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="panBody" id="panBody">
                <div class="tabs" id="panTabs">
                    <div 
                        v-for="(tab, tabIndex) in tables.items"
                        :key="tabIndex"
                        :class="tabIndex==tables.curIndex?'tabItem active':'tabItem' "
                        @click="onPickTable(tabIndex)"
                    >
                        {{tab.tabName}}
                    </div>
                </div>
            </div>
        </div>
        <div class="fieldPan">
            <div class="panHeader">
                <div class="title">
                    Fields
                </div>
                <div class="acs">
                    <ul class="lstAcs">
                        <li>
                            <el-button type = "text" @click="checkFields(1)"><i class="fa fa-check-square-o"></i> 全选</el-button>
                        </li>
                        <li>
                            <el-button type = "text" @click="checkFields(0)"><i class="fa fa-square-o"></i> 清除</el-button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="panBody" >
                <div class="tabs" id="panBodyField">
                    <div 
                        v-for="(field, fieldIndex) in fields.items"
                        :key="fieldIndex"
                        class="fieldItem" 
                        @click="onPickField(field)"
                    >
                        <i v-if="field.checked==1" class="fa fa-check-square"></i>
                        <i  v-if="field.checked!=1" class="fa fa-square-o"></i>
                        <span>{{field.fieldName}}</span>
                        
                    </div>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="header">
                <ul class="acs">
                    <li>
                        <el-button type ="text" @click="acSelect">select</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acSelectAs">selectAs</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acInsert">insert</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acUpdate">update</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acCols">cols</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acJson">json</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acSettings">settings</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acTabCols">tabCols</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acEditors">editors</el-button>
                    </li>
                    <li>
                        <el-button type ="text" @click="acEditors2">editors2</el-button>
                    </li>
                </ul>
            </div>
            <div class="body">
                <div class="code">
                    <textarea name="" id="txtCode" rows="40" v-model="codeValue"></textarea>
                </div>
            </div>
        </div>
    </div> 
</template>

<script>
    export default {
        mounted() {
            var me = this;
            try{
                me.$nextTick().then(_=>{
                    me.resetSize();
                })
                me.refreshTables();
            }
            catch(er){
                console.log(er)
            }
        },
        
        data() {
            return {
                tables: {
                    items:[],
                    curIndex:0
                },
                fields: {
                    items:[],
                    curIndex:0
                },
                codeValue:""
                
            };
        },

        methods: {
            refreshTables() {
                var me = this;
                try{
                    var key = "against/getTables";
                    me.sys.query(key, { }).then(res=>{
                        me.tables.items = res;
                        me.onPickTable(me.tables.curIndex);
                    })
                }
                catch(er){
                    console.log(er)
                }
            },
            resetSize() {
                var me = this;
                try{ 
                    var h = document.getElementById('panBody').offsetHeight;
                    console.log(h);
                    document.getElementById('panTabs').style = "height:"+h+"px"
                    document.getElementById('panBodyField').style = "height:"+h+"px"
                }
                catch(er){
                    console.log(er)
                }
            },
            onPickTable( tabIndex) {
                var me = this;
                try{
                    me.tables.curIndex = tabIndex;
                    me.refreshFields()
                }
                catch(er){
                    console.log(er)
                }
            },
            refreshFields() {
                var me = this;
                try{
                    var key = "against/getTableFields";
                    var tabId = me.tables.items[me.tables.curIndex].tabId;
                    me.sys.query(key, { tabId : tabId}).then(res=>{
                        me.fields.items = res;
                    })

                }
                catch(er){
                    console.log(er)
                }
            },
            onPickField( f) {
                var me = this;
                try{
                    var fields = JSON.parse(JSON.stringify(me.fields.items))
                    var field = fields.find( fi=>{
                        return fi.fieldName == f.fieldName;
                    })
                    if (field.checked && field.checked>0){
                        field.checked =0;
                    }
                    else{
                        field.checked = 1;
                    }
                    me.fields.items = fields;
                }
                catch(er){
                    console.log(er)
                }
            },
            checkFields( flag ) {
                var me = this;
                try{
                    var fields = JSON.parse(JSON.stringify(me.fields.items))
                    fields.forEach( f=>{
                        f.checked = flag>0?1:0;
                    }) 
                    me.fields.items = fields;
                }
                catch(er){
                    console.log(er)
                }
            },
            acSelect ( ) {
                var me = this;
                try{
                    var data = {
                        tabName: me.tables.items[me.tables.curIndex].tabName ,
                        fields : me.fields.items.filter( f=>{
                            return f.checked && f.checked>0;
                        })
                    }; 
                    var fields = data.fields.map( f=>{
                        return f.fieldName
                    }).join(",");
                    var code = ['select', fields , "from" , data.tabName ].join(" ");
                    me.codeValue = code;

                    
                }
                catch(er){
                    console.log(er)
                }
            },
            acSelectAs ( ) {
                var me = this;
                try{
                    var data = {
                        tabName: me.tables.items[me.tables.curIndex].tabName ,
                        fields : me.fields.items.filter( f=>{
                            return f.checked && f.checked>0;
                        })
                    }; 
                    var fields = data.fields.map( f=>{
                        var field = me.first2Lower(f.fieldName.replace("F_" ,""));
                        var fieldItem = f.fieldName + ' as '+ field
                        return fieldItem;
                    }).join("\n,");
                    var code = ['select', fields , "from" , data.tabName ].join(" \n");
                    me.codeValue = code;

                    
                }
                catch(er){
                    console.log(er)
                }
            },
            first2Lower ( str ) {
                var me = this;
                var res = str;
                try{
                    res= str.trim().replace(str[0], str[0].toLowerCase());                    
                }
                catch(er){
                    console.log(er)
                }
                return res;
            },
            acInsert ( ) {
                var me = this;
                try{
                    var data = {
                        tabName: me.tables.items[me.tables.curIndex].tabName ,
                        fields : me.fields.items.filter( f=>{
                            return f.checked && f.checked>0;
                        })
                    };
                    var fields = data.fields.map( f=>{
                        return f.fieldName
                    }).join("\n,");
                    var values = data.fields.map( f=>{
                        var field = me.first2Lower(f.fieldName.replace("F_" ,""));
                        return '%('+ field+")s";
                    }).join("\n,");
                    var code = ['insert into ', data.tabName , "(" , fields ,") values (" , values, ")" ].join("\n");
                    me.codeValue = code;

                    
                }
                catch(er){
                    console.log(er)
                }
            },
            acUpdate ( ) {
                var me = this;
                try{
                    var data = {
                        tabName: me.tables.items[me.tables.curIndex].tabName ,
                        fields : me.fields.items.filter( f=>{
                            return f.checked && f.checked>0;
                        })
                    };
                    var fields = data.fields.map( f=>{
                        var field = me.first2Lower(f.fieldName.replace("F_" ,""));
                        return f.fieldName+' = '+ '%('+ field+")s";
                    }).join("\n,");
                    var id = me.first2Lower(data.tabName.replace("T_" ,""))+"Id";
                    var code = ['update', data.tabName +" set ",  fields ," where F_ID=%("+id+")s"  ].join("\n");
                    me.codeValue = code;

                    
                }
                catch(er){
                    console.log(er)
                }
            },
            acCols ( ) {
                var me = this;
                try{
                    var data = {
                        tabName: me.tables.items[me.tables.curIndex].tabName ,
                        fields : me.fields.items.filter( f=>{
                            return f.checked && f.checked>0;
                        })
                    };
                    var code = data.fields.map( f=>{
                        var field = me.first2Lower(f.fieldName.replace("F_" ,""));
                        return "'"+field +"'" ;
                    }).join(","); 
                    me.codeValue = code;

                    
                }
                catch(er){
                    console.log(er)
                }
            },
            acJson ( ) {
                var me = this;
                try{
                    var data = {
                        tabName: me.tables.items[me.tables.curIndex].tabName ,
                        fields : me.fields.items.filter( f=>{
                            return f.checked && f.checked>0;
                        })
                    };
                    var fields = data.fields.map( f=>{
                        var field = me.first2Lower(f.fieldName.replace("F_" ,""));
                        return '\t'+field + ':"" , ';
                    }).join("\n"); 
                    var code = ["{",fields,"}" ].join("\n");
                    me.codeValue = code;

                    
                }
                catch(er){
                    console.log(er)
                }
            },
            acSettings ( ) {
                var me = this;
                try{
                    var data = {
                        tabName: me.tables.items[me.tables.curIndex].tabName ,
                        fields : me.fields.items.filter( f=>{
                            return f.checked && f.checked>0;
                        })
                    };
                    var code = data.fields.map( f=>{
                        var fieldItem = {
                            field: f.fieldName ,
                            lab:me.first2Lower(f.fieldName.replace("F_" ,"")),
                            width:"",
                            val:""
                        };
                        return JSON.stringify(fieldItem);
                    }).join(",\n"); 
                    me.codeValue = code; 
                }
                catch(er){
                    console.log(er)
                }
            },
            acTabCols ( ) {
                var me = this;
                try{
                    var data = {
                        tabName: me.tables.items[me.tables.curIndex].tabName ,
                        fields : me.fields.items.filter( f=>{
                            return f.checked && f.checked>0;
                        })
                    };
                    var code = data.fields.map( f=>{
                        var field = me.first2Lower(f.fieldName.replace("F_" ,""));
                        var colItems = [
                            '<el-table-column',
                            '\tprop="'+field+'"',
                            '\tlabel="'+field+'"',
                            '></el-table-column>'        
                        ];
                        return colItems.join('\n');
                    }).join("\n"); 
                    me.codeValue = code; 
                }
                catch(er){
                    console.log(er)
                }
            },
            acEditors ( ) {
                var me = this;
                try{
                    var data = {
                        tabName: me.tables.items[me.tables.curIndex].tabName ,
                        fields : me.fields.items.filter( f=>{
                            return f.checked && f.checked>0;
                        })
                    };
                    var code = data.fields.map( f=>{
                        var field = me.first2Lower(f.fieldName.replace("F_" ,""));
                        var colItems = [
                            '<div class="editRow">',
                            '\t<div class="lab" style="width:130px">'+field+'</div>',
                            '\t<div class="edit">',
                            '\t\t<el-input v-model="dlg.info.'+field+'"></el-input>', 
                            '\t</div>', 
                            '</div>'
                        ];
                        return colItems.join('\n');
                    }).join("\n"); 
                    me.codeValue = code; 
                }
                catch(er){
                    console.log(er)
                }
            },
            acEditors2 ( ) {
                var me = this;
                try{
                    var data = {
                        tabName: me.tables.items[me.tables.curIndex].tabName ,
                        fields : me.fields.items.filter( f=>{
                            return f.checked && f.checked>0;
                        })
                    };
                    var code = data.fields.map( f=>{
                        var field = me.first2Lower(f.fieldName.replace("F_" ,""));
                        var colItems = [
                            '<el-col :span="12" >',
                            '\t<div class="editRow">',
                            '\t\t<div class="lab" >'+field+'</div>',
                            '\t\t<div class="edit">',
                            '\t\t\t<el-input v-model="dlg.info.'+field+'"></el-input>',  
                            '\t\t<div>',
                            '\t</div>',
                            '<el-col>'
                        ];
                        return colItems.join('\n');
                    }).join("\n"); 
                    me.codeValue = code; 
                }
                catch(er){
                    console.log(er)
                }
            },
        },
    }
</script>

<style lang="less" scoped>
    .page{
        height: 100%;

        .tabPan{
            position: fixed;
            left: 0;
            width: 200px;
            height: 100%;
            background-color: #fafafa;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #ddd;
            .panHeader{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                border-bottom: 1px solid #eee;
                .title{
                    font-weight: bold;
                }
            }
            .panBody{
                flex: 1;
                .tabs{
                    height: 500px;
                    overflow-x: hidden;
                    overflow-y: auto;
                    .tabItem{
                        padding: 10px;
                        border-bottom: 1px solid #ddd;
                    }
                    .tabItem:hover{
                        cursor: pointer;
                        background-color: #f2f3f9;
                    }
                    .tabItem.active{
                        background-color: #0077fe;
                        color: #fff;
                        font-weight: bold;
                    }
                }
            }
        }

        .fieldPan{
            position: fixed;
            left: 200px;
            width: 300px;
            height: 100%;
            background-color: #fafafa;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #ddd;
            .panHeader{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                border-bottom: 1px solid #eee;
                .title{
                    font-weight: bold;
                }
                .acs{
                    ul.lstAcs{
                        display: flex;
                        li{
                            padding: 0 5px;
                        }
                    }
                }
            }
            .panBody{
                flex: 1;
                .tabs{
                    height: 500px;
                    overflow-x: hidden;
                    overflow-y: scroll;
                    .fieldItem{
                        padding: 10px;
                        border-bottom: 1px solid #ddd;
                        display: flex;
                        align-items: center;
                        i{
                            padding-right:10px;
                        }
                    }
                    .tabItem:hover{
                        cursor: pointer;
                        background-color: #f2f3f9;
                    }
                    .tabItem.active{
                        background-color: #0077fe;
                        color: #fff;
                        font-weight: bold;
                    }
                }
            }
        }
        .main{
            padding-left: 500px;
            .header{
                background-color: #fff;
                display: flex;
                padding: 10px;
                justify-content: space-between;
                align-items: center;
                ul.acs{
                    display: flex;
                    li{
                        padding: 0 5px;
                    }
                }
            }
            .body{
                padding : 10px;
                .code{
                    textarea{
                        width:100%;
                    }
                }
            }
        }
    }
</style>